<template>
    <div>
        <div class="order-body" v-loading="loading">
            <div class="no-pay-box" v-if="info.state == 1">
                <div class="on-pay-left-box on-pay-blue" v-if="info.total_price > 0">
                    待支付
                </div>
                <div class="on-pay-right-box text-orange" v-if="info.total_price > 0">
                    您的订单将与{{ str }}后失效，请尽快支付~
                </div>
                <div class="on-pay-left-box on-pay-blue" v-if="info.total_price == 0">
                    待确认
                </div>
                <div class="on-pay-right-box text-orange" v-if="info.total_price == 0">
                    您的订单将与{{ str }}后失效，请尽快点击确认提交到保司~
                </div>
            </div>
            <div class="no-pay-box" v-if="info.state == 0">
                <div class="on-pay-left-box on-pay-grey">
                    已取消
                </div>
                <div class="on-pay-right-box text-grey">
                    您的订单已取消~
                </div>
            </div>
            <div class="no-pay-box" v-if="info.state == 2">
                <div class="on-pay-left-box on-pay-green">
                    已支付
                </div>
                <div class="on-pay-right-box text-grey">
                    批增人员{{ info.inc_num }}人，批减人员{{ info.dec_num }}人~
                </div>
            </div>
            <div class="title-box">批单详情</div>
            <div class="info-box" v-loading="load">
                <el-row :gutter="10">
                    <el-col :span="12">
                        <div class="info-item-box"><span
                                class="info-title-box">保单号：</span><span>{{ info.order_no }}</span></div>
                    </el-col>
                    <el-col :span="12">
                        <div class="info-item-box"><span class="info-title-box">批单号：</span><span>{{ info.pd_no ?
                                info.pd_no : '----'}}</span></div>
                    </el-col>
                    <el-col :span="12">
                        <div class="info-item-box"><span
                                class="info-title-box">生效时间：</span><span>{{ info.start_time }}</span></div>
                    </el-col>
                    <el-col :span="12">
                        <div class="info-item-box"><span
                                class="info-title-box">失效时间：</span><span>{{ info.end_time }}</span></div>
                    </el-col>
                    <el-col :span="12">
                        <div class="info-item-box"><span
                                class="info-title-box">合计保费：</span><span>{{ info.total_price }}</span></div>
                    </el-col>
                    <el-col :span="12">
                        <div class="info-item-box"><span
                                class="info-title-box">批改时间：</span><span>{{ info.create_time }}</span></div>
                    </el-col>
                    <el-col :span="12" v-if="info.url">
                        <div class="info-item-box"><span class="info-title-box">批改下载：</span><a :href="info.url"
                                target="_blank">点击下载</a></div>
                    </el-col>
                </el-row>
            </div>
            <div class="title-box">发票信息</div>
            <div class="info-box" v-if="info.invoice">
                <el-row :gutter="10">
                    <el-col :span="12">
                        <div class="info-item-box"><span class="info-title-box">
                                纳税人名称：</span><span>{{ info.invoice.invoice_name }}</span></div>
                    </el-col>
                    <el-col :span="12">
                        <div class="info-item-box"><span
                                class="info-title-box">纳税人识别号：</span><span>{{ info.invoice.invoice_no }}</span></div>
                    </el-col>
                    <el-col :span="12">
                        <div class="info-item-box"><span
                                class="info-title-box">发票类型：</span><span>{{ info.invoice.invoice_type == 1 ? '专票' :
                                '普票'}}</span></div>
                    </el-col>
                    <el-col :span="12" v-if="info.invoice.invoice_type == 1">
                        <div class="info-item-box"><span
                                class="info-title-box">税务登记地址：</span><span>{{ info.invoice.invoice_address }}</span></div>
                    </el-col>
                    <el-col :span="12" v-if="info.invoice.invoice_type == 1">
                        <div class="info-item-box"><span
                                class="info-title-box">税务登记联系电话：</span><span>{{ info.invoice.invoice_mobile }}</span>
                        </div>
                    </el-col>
                    <el-col :span="12" v-if="info.invoice.invoice_type == 1">
                        <div class="info-item-box"><span
                                class="info-title-box">税务登记银行名称：</span><span>{{ info.invoice.invoice_bank }}</span></div>
                    </el-col>
                    <el-col :span="12" v-if="info.invoice.invoice_type == 1">
                        <div class="info-item-box"><span
                                class="info-title-box">税务登记银行账号：</span>{{ info.invoice.invoice_bank_no }}</div>
                    </el-col>
                    <el-col :span="12" v-if="info.state == 2 && info.invoice.invoice_type == 2 && info.total_price > 0">
                        <div class="info-item-box"><span class="info-title-box">发票文件：</span>
                            <el-button type="text" size="mini" icon="el-icon-search" @click="getInvoice()"
                                v-if="!info.fp_url">获取电子发票</el-button>
                            <a :href="info.fp_url" download="电子发票" v-else><el-button type="text" size="mini"
                                    icon="el-icon-download">下载电子发票</el-button></a>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="title-box">批改人员列表</div>
            <el-tabs v-model="form.type" @tab-click="handleClick">
                <el-tab-pane label="批增人员" name="1"></el-tab-pane>
                <el-tab-pane label="批减人员" name="2"></el-tab-pane>
            </el-tabs>
            <el-table size="mini" :data="list.data" border v-loading="loading">
                <el-table-column label="姓名" prop="name"></el-table-column>
                <el-table-column label="身份证号" prop="id_card"></el-table-column>
                <el-table-column label="生效日期" prop="start_time"></el-table-column>
                <el-table-column label="失效日期" prop="end_time"></el-table-column>
                <el-table-column label="保单金额" prop="price"></el-table-column>
            </el-table>
            <div class="page-box">
                <el-pagination background small :current-page="list.current_page" :page-size="list.per_page"
                    layout="total, prev, pager, next, jumper" :total="list.total"
                    @current-change="changePage"></el-pagination>
            </div>
            <div class="detail-footer-box" v-if="info.state == 1">
                <div class="footer-text-box">
                    <span class="text-grey">批增人员{{ info.inc_num }}人，批减人员{{ info.dec_num }}人</span>
                    <span class="total-price-box">合计保费：{{ info.total_price }}元</span>
                </div>
                <div class="footer-btn-box">
                    <el-button size="small" style="width: 100px" @click="cancel()">取消</el-button>
                    <span v-if="info.total_price > 0">
                        <el-button type="primary" size="small" style="width: 100px" @click="payDo(1)">在线支付</el-button>
                        <el-button type="primary" size="small" style="width: 100px" @click="payDo(2)">线下支付</el-button>
                    </span>
                    <el-button type="primary" size="small" v-else style="width: 100px"
                        @click="nopay()">确认提交到保司</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                id: '',
                type: '1',
                page: 1,
            },
            loading: true,
            load: true,
            list: {
                current_page: 1,
                data: []
            },
            info: {
                invoice: {},
                state: 1,
            },
            str: "00小时00分00秒",
            timer: '',
        }
    },
    mounted() {
        this.form.id = this.$route.params.id;
        this.getData();
        this.getInfo();
    },
    methods: {
        getInvoice() {
            console.log(this.id);
            this.loading = true;
            this.ajaxs('order/changeInvoice', {
                data: { id: this.form.id },
                success: (res) => {
                    this.loading = false;
                    if (res.code) {
                        this.getData();
                    }
                    this.toast(res.code, res.msg);
                }
            })
        },
        getData() {
            this.loading = true;
            this.ajaxs('order/getEndorseUser', {
                data: this.form,
                success: (res) => {
                    this.list = res.msg;
                    this.loading = false;
                }
            })
        },
        getInfo() {
            this.load = true;
            this.ajaxs('order/getEndorseInfo', {
                data: this.form,
                success: (res) => {
                    this.info = res.msg;
                    this.load = false;
                    this.setTime(this.info.num);
                }
            })
        },
        changePage(e) {
            this.form.page = e;
            this.getData();
        },
        handleClick() {
            this.form.page = 1;
            this.getData();
        },
        setTime(num) {
            console.log(num);
            var h = 0;
            var m = 0;
            var s = 0;
            this.timer = setInterval(() => {
                if (num > 0) {
                    num--;
                    h = Math.floor(num / 3600);
                    m = Math.floor((num % 3600) / 60);
                    s = Math.floor((num % 3600) % 60);
                    this.str = (h < 10 ? "0" + h : h) + '小时' + (m < 10 ? "0" + m : m) + '分钟' + (s < 10 ? "0" + s : s) + '秒';
                } else {
                    clearInterval(this.timer);
                    //请求数据取消订单
                    this.ajaxs('order/cancelEndorse', {
                        data: { id: this.form.id },
                        success: (res) => {
                            if (res.code) {
                                this.getInfo();
                            }
                        }
                    })
                }
            }, 1000);
        },
        cancel() {
            this.ajaxs('order/cancelEndorse', {
                data: { id: this.form.id },
                success: (res) => {
                    this.toast(res.code, res.msg);
                    if (res.code) {
                        this.getInfo();
                    }
                }
            })
        },
        nopay() {
            this.ajaxs('order/changeOrderPay', {
                data: { id: this.form.id },
                success: (res) => {
                    if (res.code) {
                        this.getInfo();
                    } else {
                        this.toast(res.code, res.msg);
                    }
                }
            })
        },
        payDo(type) {
            this.ajaxs('order/updateOrderPay', {
                data: { id: this.form.id, type: type },
                success: (res) => {
                    if (res.code) {
                        window.open(res.msg);
                    } else {
                        this.toast(res.code, res.msg);
                    }
                }
            })
        },
    },
    watch() {
        if (this.$route.params.id) {
            this.form.id = this.$route.params.id;
            this.getData();
            this.getInfo();
        }
    },
}
</script>

<style scoped>
@import "../../assets/css/order/endorse.css";
</style>
